<template>
  <div class="register">
    <!-- 表头 -->
    <van-nav-bar size="20">
      <van-icon name="arrow-left" @click="onclickleft" size="20" slot="left" color="black" />
      <router-link slot="right" to="/login/account">登录</router-link>
    </van-nav-bar>
    <!-- 登录注册 -->
    <div>
      <div class="fonts"><span class="passfont">注册</span></div>
      <van-form>
        <van-cell-group inset>
          <van-field v-model="uname" name="pattern" placeholder="用户名"
            :rules="[{ pattern, required: true, message: '账号格式不对' }]" />
          <van-field v-model="upwd" type="password" placeholder="密码" 
          :rules="[{ required: true }]" />
          <van-row>
            <van-col span="16">
              <van-field class="code" name="code" v-model="code" width="100" size="large"
                placeholder="验证码" :rules="[{ required: true }]" />
            </van-col>
            <!-- 验证码图片  -->
            <van-col span="8">
              <van-image
                @click="change"
                fit="contain"
                class="code-img"
                width="100"
                fill
                :src="codepng"
              />
            </van-col>
          </van-row>
        </van-cell-group>
        <div style="margin: 1.5rem 1rem;">
          <van-button block type="danger" @click="onSubmit" native-type="submit"
           :disabled="!checked">
            注册
          </van-button>
        </div>
      </van-form>
      <van-checkbox v-model="checked" class="check" icon-size="1rem">
        <router-link to="/"
          >已阅读并同意《用户服务协议》、《隐私政策》</router-link
        >
      </van-checkbox>
    </div>
  </div>
</template>
<script>
import { domain } from "../a";

export default {
  data() {
    return {
      uname: "",
      upwd: "",
      code: "",
      checked: false,
      pattern: /\w{0,10}/,
      codepng: "",
    };
  },
  mounted() {
    // this.axios.get('/user/code'+new Date().getTime());
  },
  methods: {
    onclickleft() {
      this.$router.go(-1);
    },
    onSubmit() {
      console.log(1111);
      if (this.uname != "" && this.upwd != "" && this.code != "") {
        this.axios
          .post(
            "/user/register",
            `uname=${this.uname}&upwd=${this.upwd}&code=${this.code}`
          )
          .then((result) => {
            console.log(1111);
            if (result.data.code == 200) {
              console.log("登录成功");
              this.$router.push("/login/account");
            } else {
              console.log(result.data.msg);
              this.$dialog.alert({
                message: result.data.msg,
              });
            }
          });
      }
    },
    change() {
      this.codepng = `${domain}/user/code?t=` + new Date().getTime();
    },
  },
  mounted() {
    this.change();
  },
};
</script>
<style lang="scss">
.register {
  a {
    font-size: 1rem;
    color: black;
  }
  span {
    font-size: 1.5rem;
    font-weight: normal;
  }
  .fonts {
    margin: 1.4rem;
    .passfont {
      font-size: 1.5rem;
    }
  }
  // 文本框
  .van-cell {
    height: 4rem;
    line-height: 3rem;
    padding-left: 1.3rem;
  }
  // .code{
  //     width: 70%;
  // }
  .code-img {
    height: 100%;
    padding-top: 0.8rem;
  }
  .acolor {
    margin-left: 1rem;
    color: red;
  }
  // 单选框
  .check {
    padding-left: 1rem;
    a {
      font-size: 0.9rem;
      color: deepskyblue;
    }
  }
}
</style>
